<template>
  <v-row >
    <v-dialog
      v-model="dialog"
      fullscreen
      class="normal_dialog"
      hide-overlay
      transition="dialog-bottom-transition"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          class="centerButton"
          color="primary"
          dark
          style="font-family: 宋体,serif; font-weight: bolder; "
          v-bind="attrs"
          v-on="on"
        >
          建模工具使用说明
        </v-btn>
      </template>
      <v-card>
        <v-toolbar
          dark
          color="primary"
        >

          <v-toolbar-title>建模工具使用说明</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn
            icon
            dark
            style="margin-right: 1vw"
            @click="dialog = false"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-toolbar>


        <v-container>
<!--          每页序号和标题-->
          <div style="height: 80vh">
            <v-card-title style="padding-bottom: 5vh">
              <v-avatar
                color="primary"
                class="subheading white--text"
                size="32"
                v-text="step+1"
              ></v-avatar>
              <span style="font-family: serif;font-weight: bold;font-size: 25px">&nbsp;{{ currentTitle }}</span>
            </v-card-title>
<!--            窗口内容-->
            <v-window v-model="step">
<!--            第一页 总体布局介绍-->
              <v-window-item :value="0">
                <v-row justify-lg="center">
                  <v-col>
                    <v-img width="1000" src="../../public/images/i_1-1.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第二页 新增功能/部件-->
              <v-window-item :value="1">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击“新增功能/部件”按钮</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_2-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 输入功能/部件名称和类型</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_2-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 新增功能/部件成功</span>
                    </v-subheader>
                    <v-img width="400" src="../../public/images/i_2-3.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第三页 编辑功能/部件-->
              <v-window-item :value="2">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击选中一个功能/部件节点</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_3-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“编辑功能/部件”按钮</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_3-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 修改功能/部件名称和类型</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_3-3.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">4. 编辑功能/部件成功</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_3-4.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第四页 产生新功能/部件-->
              <v-window-item :value="3">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击选中一个功能/部件节点</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_3-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“产生新功能/部件”按钮</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_4-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 输入功能/部件名称和类型</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_4-3.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">4. 产生新功能/部件成功</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_4-4.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第五页 删除功能/部件-->
              <v-window-item :value="4">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击选中一个功能/部件节点</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_4-4.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“删除功能/部件”按钮</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_5-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 确认删除</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_5-3.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">4. 删除功能/部件成功</span>
                    </v-subheader>
                    <v-img width="350" src="../../public/images/i_3-1.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第六页 建立产生关系-->
              <v-window-item :value="5">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击选中一个功能/部件节点</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_6-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“建立产生关系”按钮</span>
                    </v-subheader>
                    <v-img width="200" src="../../public/images/i_6-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 选择想要建立关系的节点</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_6-3.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">4. 建立产生关系成功</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_4-4.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第七页 删除关系-->
              <v-window-item :value="6">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 点击选中一个关系</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_7-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“删除关系”按钮</span>
                    </v-subheader>
                    <v-img width="200" src="../../public/images/i_7-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 确认删除</span>
                    </v-subheader>
                    <v-img width="200" src="../../public/images/i_7-3.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">4. 删除关系成功</span>
                    </v-subheader>
                    <v-img width="500" src="../../public/images/i_6-1.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第八页 显示和重置-->
              <v-window-item :value="7">
                <br><br><br>
                <v-row justify-lg="center">
                  <v-col cols="12" lg="5">
                    <v-img width="450" src="../../public/images/i_8-1.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第九页 视图工具栏-->
              <v-window-item :value="8">
                <br>
                <v-row justify-lg="center">
                  <v-col cols="12" lg="6">
                    <v-img src="../../public/images/i_9-1.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
<!--            第十页 生成解决途径-->
              <v-window-item :value="9">
                <v-row>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">1. 完成功能模型图</span>
                    </v-subheader>
                    <v-img src="../../public/images/i_10-1.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">2. 点击“生成解决途径”按钮，分析模型矛盾点</span>
                    </v-subheader>
                    <v-img width="250" src="../../public/images/i_10-2.png"></v-img>
                  </v-col>
                  <v-col cols="12" lg="6">
                    <v-subheader>
                      <span style="color: black;font-family: serif;font-size: 16px">3. 获得一系列的解决途径</span>
                    </v-subheader>
                    <v-img width="280" src="../../public/images/i_10-3.png"></v-img>
                  </v-col>
                </v-row>
              </v-window-item>
            </v-window>
          </div>
<!--          底部按钮组-->
          <v-card-actions class="justify-space-between">
            <v-btn
              text
              @click="prev"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
            <v-item-group
              v-model="step"
              class="text-center"
              mandatory
            >
              <v-item
                v-for="n in length"
                :key="`btn-${n}`"
                v-slot="{ active, toggle }"
              >
                <v-btn
                  :input-value="active"
                  icon
                  @click="toggle"
                >
                  <v-icon>mdi-record</v-icon>
                </v-btn>
              </v-item>
            </v-item-group>
            <v-btn
              text
              @click="next"
            >
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
          </v-card-actions>
        </v-container>

<!--        以上部分是丁云龙同志进行的添加-->

<!--        丁云龙同志注释掉的区域-->

<!--        <v-list-->
<!--          subheader-->
<!--        >-->
<!--          <v-subheader>功能/部件</v-subheader>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>新增功能/部件</v-list-item-title>-->
<!--              <v-list-item-subtitle>添加你的发明创造所需要的、有用或有害的功能/部件</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>编辑功能/部件</v-list-item-title>-->
<!--              <v-list-item-subtitle>选中某一功能/部件后、对其名称或类型进行编辑</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>产生新功能/部件</v-list-item-title>-->
<!--              <v-list-item-subtitle>在某一功能/部件后、添加有用或有害的功能/部件</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>删除功能/部件</v-list-item-title>-->
<!--              <v-list-item-subtitle>删除选中的功能/部件</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--        </v-list>-->
<!--        <v-divider></v-divider>-->
<!--        <v-list-->
<!--          subheader-->
<!--        >-->
<!--          <v-subheader>关联</v-subheader>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>建立产生关系</v-list-item-title>-->
<!--              <v-list-item-subtitle>选中某一功能/部件、让其与没有关系的功能/结点建立产生关系</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>删除关系</v-list-item-title>-->
<!--              <v-list-item-subtitle>删除选中的关系</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--        </v-list>-->
<!--        <v-divider></v-divider>-->

<!--        <v-list-->
<!--          subheader-->
<!--        >-->
<!--          <v-subheader>显示</v-subheader>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>USEFUL、HARMFUL、ALL</v-list-item-title>-->
<!--              <v-list-item-subtitle>选择显示有用、有害或所有功能/部件</v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--        </v-list>-->

<!--        <v-divider></v-divider>-->
<!--        <v-list-->
<!--          subheader-->
<!--        >-->
<!--          <v-subheader>重置</v-subheader>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>删除所有关系和功能/部件</v-list-item-title>-->
<!--              <v-list-item-subtitle></v-list-item-subtitle>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--        </v-list>-->

<!--        <v-divider></v-divider>-->
<!--        <v-list-->
<!--          subheader-->
<!--        >-->
<!--          <v-subheader>生成解决途径</v-subheader>-->
<!--          <v-list-item>-->
<!--            <v-list-item-content>-->
<!--              <v-list-item-title>保存功能模型图、并在右侧生成解决途径</v-list-item-title>-->
<!--            </v-list-item-content>-->
<!--          </v-list-item>-->
<!--        </v-list>-->
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false,
        notifications: false,
        sound: true,
        widgets: false,
//丁云龙同志添加的data
        step: 0, //当前页面
        length: 10, //页面总数
      }
    },
//丁云龙同志添加的computed
    computed: {
      currentTitle () { //获取当前页标题
        switch (this.step) {
          case 0: return '建模工具区域介绍'
          case 1: return '新增功能/部件'
          case 2: return '编辑功能/部件'
          case 3: return '产生新功能/部件'
          case 4: return '删除功能/部件'
          case 5: return '建立产生关系'
          case 6: return '删除关系'
          case 7: return '显示和重置'
          case 8: return '视图工具栏'
          case 9: return '生成解决途径'
          default: return 'Account created'
        }
      },
    },
//丁云龙同志添加的methods
    methods: {
      next () { //下一页
        this.step = this.step + 1 === this.length
          ? 0
          : this.step + 1
      },
      prev () { //上一页
        this.step = this.step - 1 < 0
          ? this.length - 1
          : this.step - 1
      },
    }
  }
</script>

<style scoped>
  .centerButton{
    position: absolute;
    left: 43%;
  }
  .normal_dialog{
    width: 100% !important;
  }
</style>
